<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <script src="./js/jquery-3.5.0.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #content {
            position: absolute;
            width: 100%;
        }

        #content>ul {
            width: 1250px;
            margin-left: auto;
            margin-right: auto;
            list-style: none;
            height: 30px;
            line-height: 30px;
            color: #fff;
            text-align: center;
        }

        #content>ul>li {
            background-color: rgba(0, 0, 0, 0.5);
            width: 250px;
            float: left;
        }

        #content>ul>li>ul {
            display: none;
            list-style: none;
            text-align: left;
        }

        #content>ul>li>ul>li {
            display: block;
            height: 30px;
            padding-left: 30px;
            line-height: 30px;
        }

        #content>ul>li>ul>li:hover {
            background-color: #ff6700;
        }

        #content>ul>li>ul>li>a {
            text-decoration: none;
        }

        #content>ul>li>ul>li>a:link {
            color: #fff;
        }

        #content>ul>li>ul>li>a:visited {
            color: #fff;
        }

        #content>ul>li:hover ul {
            display: block;
        }

        #carousel {
            margin-left: auto;
            margin-right: auto;
            width: 1250px;
            overflow: hidden;
        }
        #photo{
            width: 5000px;
            animation: photoMove 50s ease-out infinite;
        }
        #photo>img{
            float: left;
            width: 1250px;
        }
        @keyframes photoMove{
            0%,20%{
                margin-left: 0px;
            }
            20%,40%{
                margin-left: -1250px;
            }
            40%,60%{
                margin-left: -2500px;
            }
            60%,80%{
                margin-left: -3750px;
            }
            80%,100%{
                margin-left: 0;
            }
        }
        footer{
            left: 50%;
            transform: translate(-50%,0); 
            position: fixed;
            bottom: 0;
        }
    </style>
</head>

<body>
    <div id="content">
        <ul>
            <li class="root">例子
                <ul>
                    <li><a href="./charpter/实时时间.html">实时时间</a></li>
                    <li><a href="./charpter/倒计时.html">倒计时</a></li>
                    <li><a href="./charpter/轮播图.html">轮播图</a></li>
                    <li><a href="./charpter/登录界面bootstrap.html">登录界面 bootstrap</a></li>
                    <li><a href="./charpter/图片跟随鼠标移动.html">图片跟随鼠标移动</a></li>
                    <li><a href="./charpter/自定义右键菜单.html">自定义右键菜单</a></li>
                    <li><a href="./charpter/爱心弹力球.html">爱心弹力球</a></li>
                    <li><a href="./charpter/游戏控制.html">游戏控制</a></li>
                    <li><a href="./charpter/获取用户使用的浏览器类型.html">获取用户使用的浏览器类型</a></li>
                    <li><a href="./charpter/水果选择.html">水果选择</a></li>
                    <li><a href="./charpter/纯css实现轮播图.html">纯css实现轮播图</a></li>
                </ul>
            </li>
            <li class="root">游戏
            </li>
            <li class="root">Django</li>
            <li class="root">Tkinter</li>
            <li class="root">PyGame</li>
        </ul>
    </div>
    <!-- <div style="height:40px;"></div> -->
    <div id="carousel">
        <div id="photo">
            <img src="./images/carousel_1.png">
            <img src="./images/carousel_2.png" alt="">
            <img src="./images/carousel_3.png" alt="">
            <img src="./images/carousel_4.png" alt="">
        </div>
    </div>

    <footer>Power By @Songothao</footer>
    <script>
    </script>
</body>

</html>